﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>物料成品分类</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <form class="layui-form" action="">

        <div class="layui-form">
            <div class="layui-row layui-col-space16">
                <!-- 分类名称 -->
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">

                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix">
                                分类名称
                            </div>
                            <input type="text" name="productTypeName" autocomplete="off" lay-affix="clear" class="layui-input">
                        </div>
                    </div>
                </div>
                <!-- 是否启用 -->
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix">
                                是否启用
                            </div>
                            <select name="productState" lay-search>
                                <option name="productState" value="">选择是或否</option>
                                <option name="productState" value="1">是</option>
                                <option name="productState" value="2">否</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!-- 按钮 -->


                <div class="layui-btn-container">
                    <button class="layui-btn" id="searchBtn" lay-submit lay-filter="demo2">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                   @*  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-custom" lay-event="detail">
                        <span class="layui-badge-dot"></span> 新增
                    </button> *@
                </div>

            </div>
        </div>
       
    </form>
    <!-- 显示 -->
    <table class="layui-hide" id="ID-treeTable-demo"></table>
    <script type="text/html" id="TPL-treeTable-demo-tools">
        <div class="layui-btn-container">
          <a class="layui-btn layui-btn-primary layui-btn-xs" >查看</a>
          <button type="button" class="layui-btn layui-btn-primary" lay-event="detail" lay-on="test-page-custom">
                        <span class="layui-badge-dot" ></span> 新增
                    </button>
        </div>
    </script>
    <div class="layui-btn-container" style="text-align:right;">
    </div>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
@*     <script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script> *@

    <script>
        var form = layui.form;
        var $ = layui.jquery;
        var treeTable, layer;
        // 先获取元素的值，此时元素已经在前面的HTML中定义了，能获取到
        //var responsibleName = $("#responsible").val() ?? '';
        window.onload = function () {
            layui.use(function () {
                treeTable = layui.treeTable;
                layer = layui.layer;
                var $ = layui.$;
                var util = layui.util;
                var dataObj = {
                    productTypeName: "",
                    productState: 0
                };
                console.log(JSON.stringify(dataObj))
                //渲染函数，将查询操作封装在里面，方便点击查询按钮时调用
                function renderTable() {

                    // 渲染
                    var inst = treeTable.render({
                        elem: '#ID-treeTable-demo',
                        // 指定POST请求方法
                        method: 'POST',
                        contentType: 'application/json',
                        // 拼接上分页参数到URL
                        url: '@ViewBag.FoundationWrite'+ '/api/ProductType/ProductTypesList',
                        data: JSON.stringify(dataObj),
                        tree: {
                            // 启用树形结构
                            iconIndex: 0, // 树节点的图标列，0表示使用第一列作为图标列
                            idField: 'productTypeId',  // 唯一标识字段
                            pidField: 'pid',  // 父级字段
                            //childrenField: 'children'  // 默认情况下会自动从数据中读取 children 字段，所以不需要显式声明
                        },
                        maxHeight: '501px',
                        toolbar: '#TPL-treeTable-demo',
                        cols: [
                            [
                                { type: 'checkbox', fixed: 'left' },
                                {
                                    field: 'productTypeId',
                                    title: 'ID',
                                    width: 80,
                                    fixed: 'left',
                                },
                                { field: 'productTypeName', title: '父分类', width: 180, fixed: 'left' },
                                { field: 'productDescs', title: '排序', width: 120 },
                                { field: 'productZoo', title: '物料/产品', width: 100 },
                                { field: 'productState', title: '是否启用', width: 180 },
                                //操作列
                                { fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#TPL-treeTable-demo-tools" }
                            ]
                        ],
                        page: false,
                        done: function (res, curr, count) {
                            // 处理返回的数据，treeTable 已经自动解析了树形结构
                            console.log(res); // 你可以在这里检查返回的数据结构是否符合预期
                        }
                    });

                    treeTable.on('tool(' + inst.config.id + ')', function (obj) {

                        var layEvent = obj.event; // 获得 lay-event 对应的值
                        var trElem = obj.tr;
                        var trData = obj.data;
                        var tableId = obj.config.id;

                        if (layEvent === "detail") {
                            console.log(trData.productTypeName);
                            layer.open({
                                type: 1,
                                area: '750px',
                                resize: false,
                                shadeClose: true,
                                title: '新增分类',
                                content: `
                                          <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                                            <div class="demo-login-container">

                                              <div class="layui-form-item">
                                                <label class="layui-form-label">父分类</label>
                                                  <div class="layui-input-inline">
                                                    <input type="text" name="processName" id="processName" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                                                  </div>
                                               </div>

                                             <div class="layui-form-item">
                                               <label class="layui-form-label">分类名称</label>
                                                <div class="layui-input-inline">
                                                  <input type="text" id="productTypeName" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                                                 </div>
                                            </div>
                                                                                             
                                            <div class="layui-form-item">
                                             <label class="layui-form-label">显示排序</label>
                                               <div class="layui-input-inline">
                                                          <input type="number" lay-affix="number" id="productDescs" placeholder="productDescs" style:"width=200px"  value="0" class="layui-input">
                                                </div>
                                             </div>

                                            <div class="layui-form-item">
                                                <label class="layui-form-label">物料/产品</label>
                                                 <div class="layui-form">
                                                    <input type="radio" name="productZoo" id="productZoo" value="1" title="物料" checked>
                                                     <input type="radio" name="productZoo" id="productZoo" value="2" title="产品" >
                                                 </div>
                                            </div>

                                            <div class="layui-form-item">
                                                <label class="layui-form-label">启用状态</label>
                                                <div class="layui-form">
                                                   <input type="radio" name="productStated" id="productStated" value="1" title="启用" checked>
                                                   <input type="radio" name="productStated" id="productStated" value="2" title="禁用" >
                                                </div>
                                            </div>

                                            <div class="layui-btn-container">
                                                        <button type="button" class="layui-btn layui-bg-blue"  lay-submit lay-filter="demo1" >确定</button>
                                                        <button type="button" class="layui-btn ">取消</button>
                                            </div>

                                            </div>
                                            </div>
                                        </div>
                                                                                                                                                                                                                                                                        `,
                                success: function () {
                                    // 对弹层中的表单进行初始化渲染
                                    form.render();$("#processName").val(trData.productTypeName);
                                    console.log("#!!!!");
                                    // 提交事件
                                    form.on('submit(demo1)', function (data) {
                                        var data = {
                                            productTypeName: $("#productTypeName").val(),
                                            pid: $("#productTypeId").val(),
                                            // pid: $("#pid").val(),
                                            productDescs: $("#productDescs").val(),
                                            //单选框
                                            productZoo: $("[name=productZoo]").val(),
                                            productState: $("[name=productStated]").val(),
                                            Pid: trData.productTypeId
                                            // productZoo: $("#productZoo").val(),
                                            // productState: $("#productState").val(),
                                        };
                                        
                                        console.log(data);
                                        $.ajax({
                                            url: '@ViewBag.FoundationWrite' +"/api/ProductType/ProductTypesAdds",
                                            data: JSON.stringify(data),
                                            type: "post",
                                            dataType: "json",
                                            contentType: "application/json",
                                            success: function (res) {
                                                console.log(123, res);
                                                if (res.code > 0) {
                                                    layer.alert("添加成功", {
                                                        title: ''
                                                    });
                                                }
                                                else {
                                                    alert('提交失败')
                                                }
                                            }
                                        })
                                        // layer.alert(JSON.stringify(field), {
                                        //     title: '当前填写的字段值'
                                        // });
                                        // 此处可执行 Ajax 等操作       
                                        return false; // 阻止默认 form 跳转
                                    });
                                }
                            });
                        }
                    })
                }

                // 页面加载完成先渲染一次表格（如果不需要初始加载可以去掉这行）
                renderTable();
                // 点击查询按钮的事件处理函数
                // function searchData() {
                //     // 重新渲染表格，以应用新的查询条件（负责人名称）
                //     renderTable();
                // }
                // 绑定查询按钮的点击事件，重新获取输入框的值并重新渲染表格
                $('#searchBtn').on('click', function () {
                    var inputValue = $("#searchBtn").val();
                    dataObj.productTypeName = inputValue;
                    renderTable();
                });
            });
        };
    </script>
</body>
</html>